<script>
import { provide } from 'vue'
import { useVModel } from '@vueuse/core'
export default {
  name: 'xtx-tabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const activeName = useVModel(props, 'modelValue', emit)
    provide('activeName', activeName)
    // 切换tab
    function changeTab(name) {
      activeName.value = name
      // 通过emit自定义事件传递当前激活的tab
      emit('tab-click', name)
    }
    return { activeName, changeTab }
  },
  render() {
    // jsx语法
    // 默认插槽节点
    const panels = this.$slots.default()
    // 定义空数组对panels做处理
    const dynamicPanels = []
    // 循环xtx-tabs-panel组件和写多个xtx-tabs-panel得到结果是不一样
    // 写多个xtx-tabs-panel: item.props.name和item.props.label
    // 循环xtx-tabs-panel:  item.children.props.name和item.children.props.label
    panels.forEach(item => {
      if (item.type.name === 'xtx-tabs-panel') {
        dynamicPanels.push(item)
      } else {
        item.children.forEach(com => {
          dynamicPanels.push(com)
        })
      }
    })

    // tabs选项卡的头部部分
    const nav = (
      <nav>
        {dynamicPanels.map((item) => {
          return <a onClick={() => this.changeTab(item.props.name)} className={this.activeName === item.props.name ? 'active' : ''} href="javascript:;">{item.props.label}</a>
        })}
      </nav>
    )
    // 渲染时既要渲染头，也要渲染主体内容
    return <div className="xtx-tabs">{[nav, dynamicPanels]}</div>
  }
}
</script>
<style lang="less">
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>